<template>
    <div class="pagination">
        <!--只有当当前页为1时;上一页才需要禁用-->
        <button :disabled="currentPage === 1" @click="setCurrentPage(currentPage-1)">上一页</button>
        <button v-if="startEnd.start > 1"  @click="setCurrentPage(1)">1</button>
        <button v-if="startEnd.start > 2" disabled>···</button>

        <!--v-for的优先级比较高   每一次v-for都会去执行一下v-if的逻辑-->
        <button v-for="item in startEnd.end"
                v-if="item >= startEnd.start"
                :class="{active:item === currentPage}"
                @click="setCurrentPage(item)">{{item}}</button>


        <button v-if="startEnd.end < totalPages-1" disabled>···</button>
        <button v-if="startEnd.end < totalPages" @click="setCurrentPage(totalPages)">{{totalPages}}</button>
          <button :disabled="currentPage === totalPages" @click="setCurrentPage(currentPage+1)">下一页</button>
<button style="margin-left: 30px">共 {{total}} 条</button>
        <!--<button style="margin-left: 30px">共 60 条</button>-->
    </div>
</template>

<script>
    export default {
        name: "Pagination",
        props:["total","pageSize","lxyms","currentPageFromWrap"],
        data(){
            return {
                //currentPage 当前选中的页面!
                currentPage:this.currentPageFromWrap
            }
        },
        computed:{
            //总页数
            totalPages(){
                const {total,pageSize} = this;
                return Math.ceil(total/pageSize)
            },
            startEnd(){
                const {currentPage,lxyms,totalPages} = this;
                let start; //起始页
                let end; //起始页
                //start是正常的情况
                start = currentPage - Math.floor(lxyms/2)
                //start太小的情况
                start < 1 ? start = 1 : ""
                //end是正常的情况
                end = start + lxyms -1;
                //end > totalPages ? end = totalPages : ""
                //end太大的情况
                if(end > totalPages){
                    end = totalPages
                    //可以凑出五页就尽量给人家五页
                    start = end - lxyms + 1
                    //考虑全超的情况
                    start < 1 ? start = 1 : ""
                }

                return {start,end}
            }
        },
        methods:{
            setCurrentPage(index){
                if(index > this.totalPages) return;
                if(index < 1) return;
                if(index === this.currentPage) return;
                this.currentPage =index;

                //将当前的页码传递出去 实现子向父的数据传递
                this.$emit("changeCurrentPage",index)
            }
        },
        watch:{
            currentPageFromWrap(newVal){
                this.currentPage = newVal;
            }
        }
    }
</script>

<style lang="less" scoped>
    .pagination {
        display: inline;
        button {
            margin: 0 5px;
            background-color: #f4f4f5;
            color: #606266;
            outline: none;
            border-radius: 2px;
            padding: 0 4px;
            vertical-align: top;
            display: inline-block;
            font-size: 13px;
            min-width: 35.5px;
            height: 28px;
            line-height: 28px;
            cursor: pointer;
            box-sizing: border-box;
            text-align: center;
            border: 0;

            &[disabled] {
                color: #c0c4cc;
                cursor: not-allowed;
            }

            &.active {
                cursor: not-allowed;
                background-color: #409eff;
                color: #fff;
            }
        }
    }
</style>